<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="css/note-ui.css"/>
<script type="text/javascript" src="tinymce.min.js"></script>
<script type="text/javascript" src="locale.js"></script>
<script type="text/javascript">
	tinymce.init({
		body_id: "zotero-tinymce-note",
		content_css: "css/note-content.css",
		
		browser_spellcheck: true,
		convert_urls: false,
		entity_encoding: 'raw',
		fix_list_elements: true,
		paste_retain_style_properties: 'all',
		paste_data_images: true,
		
		plugins: "autolink,code,contextmenu,directionality,link,lists,nonbreaking,paste,searchreplace,textcolor",
		
		toolbar1: "bold italic underline strikethrough | subscript superscript | forecolor backcolor | removeformat | blockquote link",
		toolbar2: "formatselect | alignleft aligncenter alignright | bullist numlist outdent indent | %DIR% | searchreplace",
		toolbar_items_size: 'small',
		menubar: false,
		resize: false,
		statusbar: false,
		
		contextmenu: "cut copy paste | link | alignmentmenu | dir | code",
		link_context_toolbar: true,
		link_assume_external_targets: true,
		nonbreaking_force_tab: 4,
		
		// More restrictive version of default set, with JS/etc. removed
		valid_elements: "@[id|class|style|title|dir<ltr?rtl|lang|xml::lang],"
			+ "a[rel|rev|charset|hreflang|tabindex|accesskey|type|name|href|target|title|class],"
			+ "strong/b,"
			+ "em/i,"
			+ "strike,"
			+ "u,"
			+ "#p,"
			+ "-ol[type|compact],"
			+ "-ul[type|compact],"
			+ "-li,"
			+ "br,"
			+ "img[longdesc|usemap|src|border|alt=|title|hspace|vspace|width|height|align],"
			+ "-sub,-sup,"
			+ "-blockquote[cite],"
			+ "-table[border=0|cellspacing|cellpadding|width|frame|rules|height|align|summary|bgcolor|background|bordercolor],"
			+ "-tr[rowspan|width|height|align|valign|bgcolor|background|bordercolor],"
			+ "tbody,thead,tfoot,"
			+ "#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor|scope],"
			+ "#th[colspan|rowspan|width|height|align|valign|scope],"
			+ "caption,"
			+ "-div,"
			+ "-span,"
			+ "-code,"
			+ "-pre,"
			+ "address,"
			+ "-h1,-h2,-h3,-h4,-h5,-h6,"
			+ "hr[size|noshade],"
			+ "-font[face|size|color],"
			+ "dd,dl,dt,"
			+ "cite,"
			+ "abbr,"
			+ "acronym,"
			+ "del[datetime|cite],ins[datetime|cite],"
			+ "bdo,"
			+ "col[align|char|charoff|span|valign|width],colgroup[align|char|charoff|span|valign|width],"
			+ "dfn,"
			+ "kbd,"
			+ "label[for],"
			+ "legend,"
			+ "q[cite],"
			+ "samp,"
			+ "var,",
		
		target_list: false,
		
		setup: function (editor) {
			setLocale(editor);
			
			// Add alignment submenu to context menu
			editor.addMenuItem(
				'alignmentmenu',
				{
					icon: 'alignleft',
					text: 'Alignment',
					menu: [
						{
							icon: 'alignleft',
							text: 'Align Left',
							onclick: function () {
								tinyMCE.execCommand('JustifyLeft');
							},
							context: 'insert'
						},
						{
							icon: 'aligncenter',
							text: 'Align Center',
							onclick: function () {
								tinyMCE.execCommand('JustifyCenter');
							},
							context: 'insert'
						},
						{
							icon: 'alignright',
							text: 'Align Right',
							onclick: function () {
								tinyMCE.execCommand('JustifyRight');
							},
							context: 'insert'
						},
						{
							icon: 'alignjustify',
							text: 'Justify',
							onclick: function () {
								tinyMCE.execCommand('JustifyFull');
							},
							context: 'insert'
						}
					]
				}
			);
			
			// Add alignment split-button menu
			//
			// https://codepen.io/alangill/pen/oLJAOd
			//
			// Not currently used, but useful if we need more toolbar space
			/*editor.addButton(
				'alignmentsplit', {
					type: 'splitbutton',
					text: '',
					icon: 'alignleft',
					onclick: function(e) {
						tinyMCE.execCommand(this.value);
					},
					menu: [
						{
							icon: 'alignleft',
							text: 'Align Left',
							onclick: function() {
							tinyMCE.execCommand('JustifyLeft');
								this.parent().parent().icon('alignleft');
								this.parent().parent().value = 'JustifyLeft';
							}
						},
						{
							icon: 'aligncenter',
							text: 'Align Center',
							onclick: function() {
								tinyMCE.execCommand('JustifyCenter');
								this.parent().parent().icon('aligncenter');
								this.parent().parent().value = 'JustifyCenter';
							}
						},
						{
							icon: 'alignright',
							text: 'Align Right',
							onclick: function() {
								tinyMCE.execCommand('JustifyRight');
								this.parent().parent().icon('alignright');
								this.parent().parent().value = 'JustifyRight';
							}
						},
						{
							icon: 'alignjustify',
							text: 'Justify',
							onclick: function() {
								tinyMCE.execCommand('JustifyFull');
								this.parent().parent().icon('alignjustify');
								this.parent().parent().value = 'JustifyFull';
							}
						}
					],
					onPostRender: function() {
						// Select the first item by default
						this.value ='JustifyLeft';
					}
				}
			);*/
			
			// Set text direction
			var dir = window.location.href.match(/dir=(ltr|rtl)/)[1];
			var opDir = dir.split("").reverse().join("");
			editor.settings.directionality = dir;
			editor.addMenuItem('dir', {
				icon: opDir,
				// TODO: Show correct label based on current line
				text: opDir == 'rtl' ? "Right to left" : "Left to right",
				onclick: function () {
					editor.execCommand('mceDirection' + opDir.toUpperCase());
				},
				context: 'insert',
				prependToContext: true
			});
		},
		
		init_instance_callback: function (editor) {
			zoteroInit(editor);
			
			['Change', 'KeyDown', 'KeyPress', 'Undo', 'Redo'].forEach(eventName =>
				editor.on(eventName, event => zoteroHandleEvent(event))
			);
			
			["Cut", "Copy", "Paste"].forEach(function (command) {
				let cmd = command;
				editor.addCommand(command, function (ui, value) {
					zoteroExecCommand(editor.getDoc(), cmd, ui, value);
				});
			});
			
			["ZoteroLinkClick"].forEach(function (command) {
				editor.addCommand(command, function (ui, value) {
					zoteroHandleEvent({
						type: command,
						value
					});
				});
			});
		}
	});
	tinymce.execCommand("mceAddEditor", true, "tinymce");
</script>
</head>
<body>
<div id="tinymce"></div>
</body>
</html>
